<template>
  <div class="container" ref="course1"></div>
</template>

<script lang="ts" setup >
import * as THREE from "three";
import WebGL from "three/addons/capabilities/WebGL.js";
import { ref, onMounted } from "vue";

const course1 = ref(null);

onMounted(() => {
  load3D();
});

const load3D = () => {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight, false);
  if (course1.value) {
    course1.value.appendChild(renderer.domElement);
  }
  const geometry = new THREE.BoxGeometry(1, 1, 1);
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 ,wireframe : true});
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  camera.position.z = 2;

  // 循环渲染加载动画
  function animate() {
    requestAnimationFrame(animate);
    // 旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }
  if (WebGL.isWebGLAvailable()) {
    animate();
  } else {
    const warning = WebGL.getWebGLErrorMessage();
    course1.value.appendChild(warning);
  }
};
</script>